<template>
	<div>
		<navigationBar navigationTitle="我的订单" />

		<block v-if="isLogin === true">
			<orderTab :status.sync="status" :userStatus="1" @onRefresh="onRefresh" />

			<view class="wrap paddingBottom">
				<orderList :list="list" @onRefresh="onRefresh"></orderList>
			</view>
		</block>

		<block v-else-if="isLogin === false">
			<noLogin />
		</block>

		<tabBar :current="1" />
	</div>
</template>

<script>
	import { getOrderList } from "@/API/order.js";
	import noLogin from "@/components/noLogin/noLogin.vue";
	import orderList from "@/components/order/orderList.vue";
	import orderTab from "@/components/order/order_status_tab.vue";

	export default {
		components: {
			noLogin,
			orderTab,
			orderList,
		},
		data() {
			return {
				isLogin: null,

				status: "0",
				page: 1,
				total: 0,
				list: [],
			};
		},
		onShow() {
			this.isLogin = this.$stoarge.getToken() === "" ? false : true;
			if (this.isLogin && this.list.length === 0) {
				this.onRefresh();
			}
		},
		onPullDownRefresh() {
			if (!this.isLogin) {
				uni.stopPullDownRefresh();
				return;
			}
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				getOrderList(this.status, this.page).then((res) => {
					const list = res.data.data;
					this.total = res.data.total;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 120rpx;
	}
</style>
